<template>
    <a-card>
        <RoleForm type="add" @success="getAllRoles"></RoleForm>
    </a-card>
    <a-card>
        <a-table :columns="table.columns" :data="table.data" :expandable="table.expandRow" @expand="expand">
            <template #optional="{ record }">
                <a-row :gutter="8">
                    <a-col :span="6">
                        <a-button type="primary" @click="handleOpenEdit(record)">修改</a-button>
                    </a-col>
                    <a-col :span="6">
                        <a-button type="primary" status="danger" @click="handleOpenDelete(record)">删除</a-button>
                    </a-col>
                </a-row>
            </template>
        </a-table>
    </a-card>
    <a-modal title="修改角色信息" :visible="editModal.open" :footer="false" width="50%" @cancel="editModal.open=false">
        <RoleForm type="edit" :editRole="editModal.data"
                  @success="getAllRoles(),editModal.open=false" @cancel="editModal.open=false"></RoleForm>
    </a-modal>
    <DWM :open="deleteWarnModal.open"
         :name="deleteWarnModal.data.name"
         @ok="delRole" @cancel="deleteWarnModal.open=false"></DWM>
</template>

<script>
    import RoleForm from './components/RoleForm'
    import RoleMenus from './components/RoleMenus'
    import DWM from '../../../components/common/DelWarnModal'
    import {h} from 'vue'

    export default {
        name: "",
        components: {RoleForm, RoleMenus, DWM},
        data() {
            return {
                menus: [],
                table: {
                    loading: false,
                    expandRow: {
                        title: '菜单',
                        width: 80,
                        // icon: (expand, record) => {
                        //     console.log(expand, record)
                        // },
                        expandedRowRender: (record) => {
                            return h(RoleMenus, {record: record, menus: this.menus})
                        }
                    },
                    columns: [
                        {
                            title: '编号',
                            dataIndex: 'id'
                        },
                        {
                            title: '名称',
                            dataIndex: 'name'
                        },
                        {
                            title: '备注',
                            dataIndex: 'remark'
                        },
                        {
                            title: '操作',
                            slotName: 'optional'
                        }
                    ],
                    data: []
                },
                editModal: {
                    open: false,
                    data: {}
                },
                deleteWarnModal: {
                    open: false,
                    data: {}
                }
            }
        },
        methods: {
            getAllRoles() {
                this.table.loading = true
                this.$get(this.requestUrl.getAllRoles.url).then(res => {
                    this.table.data = res.obj
                    this.table.loading = false
                })
            },
            expand(record) {
            },
            handleOpenEdit(row) {
                let name=row.name.replace('ROLE_')
                this.editModal.data = row
                this.editModal.open = true
            },
            handleOpenDelete(row) {
                this.deleteWarnModal.data = row
                this.deleteWarnModal.open = true
            },
            delRole() {
                this.$delete(this.requestUrl.delRole.url + this.deleteWarnModal.data.id).then(res => {
                    if (res) {
                        this.deleteWarnModal.open = false
                        this.$message.success(res.message)
                        this.getAllRoles()
                    }
                })
            },
            getAllMenus() {
                this.$get(this.requestUrl.getAllMenus.url).then(res => {
                    this.menus = res.obj
                })
            }
        },
        mounted() {
            this.getAllRoles()
            this.getAllMenus()
        }
    }
</script>

<style scoped>

</style>
